<template>
    <div class="vp" ref="vp">
        <div class="video-player" @scorll="scorllHandle">
            <div class="operation-box">
                <div class="avatar-box" @click.stop="clickAuthorAvatarEvent()">
                    <div class="image-box">
                        <img src="@/assets/recommend/lucy.jpg">
                    </div>
                    <div class="follow-button" @click.stop="clickFollowButtonEvent()">
                        <img id="follow-icon" src="@/assets/recommend/follow.png">
                    </div>
                    <data>
                    </data>
                </div>

                <div class="like-box">
                    <div class="image-box" @click="clickLikeEvent">
                        <img src="@/assets/recommend/like.png">
                    </div>
                    <div class="like-count">
                        <span>{{ theVideo.likeCount }}</span>
                    </div>
                </div>

                <div class="comment-box">
                    <div class="image-box" @click="clickCommentEvent">
                        <img src="@/assets/recommend/comment.png">
                    </div>
                    <div class="comment-count">
                        <span>{{ theVideo.commentCount }}</span>
                    </div>
                </div>

                <div class="collection-box">
                    <div class="image-box" @click="clickCollectionEvent">
                        <img src="@/assets/recommend/collection.png">
                    </div>
                    <div class="collection-count">
                        <span>{{ theVideo.collectionCount }}</span>
                    </div>
                </div>

            </div>
        </div>

        <div class="siderbar" ref="siderbar" :class="{ 'siderbarActive': hideSiderbarStatus }">
            <el-scrollbar>

                <div class="close-box">
                    <div class="close-icon" @click="hideSiderBar(false)">
                        关闭
                    </div>
                </div>

                <div class="content">
                    <div v-show="siderbarController == 'avatar'">
                        <el-scrollbar>

                            <div class="siderbar-avatar-box">
                                <div class="author-video-list-box">
                                    <div class="author-video" v-for="item in authorVideoList.value" :key="item._id">
                                        <div class="cover-box">
                                            <img :src="item.coverUrl" class="cover-image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-scrollbar>
                    </div>

                    <div class="siderbar-comment-box" v-show="siderbarController == 'comment'">
                        <!-- {{ videoCommentList.value }} -->
                        <div v-for="item in videoCommentList.value" class="comment-item">
                            <div class="avatar-box">
                                <img :src="imageBaseUrl + item.user.avatar">
                            </div>
                            <div class="ci-right">
                                <div class="user-name">
                                    {{ item.user.username }}
                                </div>
                                <div class="comment-content">
                                    {{ item.comment }}
                                </div>

                                <div class="comment-bottom-info">
                                    <div class="time-box">
                                        {{ item.createTime }}
                                    </div>

                                    <div>
                                        <el-link @click="clickReplayEvent(item.commentVideoId, item.user)"
                                            style="font-size:12px">回复</el-link>
                                    </div>
                                </div>

                                <div class="replay-list">
                                    <div class="replay-item" v-for="replay in item.replayList"
                                        :key="replay.commentVideoId">
                                        <div class="ri-left">
                                            <img :src="imageBaseUrl + replay.user.avatar">
                                        </div>
                                        <div class="ri-right">
                                            <div>{{ replay.user.username }}</div>
                                            <div>{{ replay.comment }}</div>
                                            <div class="bottom-info">
                                                <div>{{ replay.createTime }}</div>
                                                <el-link @click="clickReplayEvent(replay.commentVideoId, replay.user)"
                                                    style="font-size:12px">回复</el-link>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </el-scrollbar>
            <div class="comment-operation-box" v-show="siderbarController == 'comment'">
                <el-input v-model="commentContent" style="width: 100%" :placeholder="commentPlaceHolder">
                    <template #append>
                        <el-button class="send-comment-button" @click="sendCommentEvent">发送</el-button>
                    </template>
                </el-input>

            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive, inject, watch } from 'vue'
import {addLogstandard} from '@/api/recommend-server/logstrandard'
import Player from 'xgplayer'

import {
    clickCommentEvent,
    clickReplayEvent,
    sendCommentEvent,
    getCommentList,
    commentContent,
    commentPlaceHolder,
    videoCommentList
} from "./module/comment.js"

import { siderbarController, hideSiderbarStatus, hideSiderBar } from "./module/siderbar"
import { clickAuthorAvatarEvent, clickFollowButtonEvent, listVideoOfAuthor } from "./module/author"
import { theVideo, baseDomain, authorVideoList } from "./module/domain"
import { clickLikeEvent } from "./module/like"
import { clickCollectionEvent } from "./module/collection"
import { ElMessage } from 'element-plus'
const props = defineProps({
    getVideoList: Function,
})

const siderbar = ref(null)
const imageBaseUrl = inject('imageBaseUrl')

let player = null

const vp = ref(null)

let rate = [{
    rate: 0.5,
    statistic: false
}, {
    rate: 0.8,
    statistic: false
}, {
    rate: 1,
    statistic: false
}]

onMounted(() => {
    getVideoListFun()
})

function getVideoListFun() {
    let videoList = baseDomain.videoList

    props.getVideoList()
        .then(res => {
            if (res.code == 200) {

                if (baseDomain.videoList.length <= 50)
                    baseDomain.videoList = baseDomain.videoList.concat(res.data)

                else {
                    baseDomain.videoList = res.data
                    baseDomain.videoIndex = 0
                }

                if (baseDomain.videoList.length > 0) {
                    if (player == null) {
                        baseDomain.videoIndex = 0
                        let playerUrl = baseDomain.videoList[0].playUrl
                        baseDomain.authorId = baseDomain.videoList[0].authorId
                        initPlayer(playerUrl)

                        updateVideoInfo(baseDomain.videoIndex)
                    }

                }

            }
        })
}


function initPlayer(url) {
    const recommend = vp.value
    const playerHeight = recommend.clientHeight
    let timer;

    player = new Player({
        el: document.querySelector('.video-player'),
        url: url,
        height: playerHeight,
        width: '100%',
        autoplay: true,
        volume: 0.0,

    });

    player.once('complete', () => {
        let video_box = document.querySelector(".video-player video")
        let canChange = true
        let videoList = baseDomain.videoList
        video_box.addEventListener("wheel", (event) => {

            if (canChange) {
                let isToDown = event.deltaY >= 0

                if (isToDown) {
                    if (baseDomain.videoIndex != null)
                        baseDomain.videoIndex += 1
                }

                else {
                    if (baseDomain.videoIndex != null && baseDomain.videoIndex > 0)
                        baseDomain.videoIndex -= 1
                }

                let lookEndProgress = baseDomain.videoIndex / videoList.length

                if (lookEndProgress >= 0.8) {
                    getVideoListFun()
                }

                let playUrl = videoList[baseDomain.videoIndex].playUrl
                player.src = playUrl

                canChange = false

                baseDomain.authorId = videoList[baseDomain.videoIndex].authorId
                updateVideoInfo(baseDomain.videoIndex)
                getCommentList()
                resetRate()
            }


            timer && clearTimeout(timer); // 当函数再次执行时，清除定时器，重新开始计时
            // 利用定时器，让指定函数延迟执行。
            timer = setTimeout(function () {
                // 执行传入的指定函数，利用apply更改this绑定和传参
                canChange = true
            }, 200)
        }, true);
    })

    player.on('timeupdate', currentTimeEvent)
}

function resetRate() {
    rate.forEach(item => {
        item.statistic = false
    })
}

function currentTimeEvent() {
    let completionRate = player.currentTime / player.duration

    rate.forEach((item, index) => {
        let rateOfFixed = completionRate.toFixed(1)

        if (rateOfFixed == item.rate) {
            if (rate[index].statistic) return

            rate[index].statistic = true

            let data = {
                playTimeMs: player.currentTime * 1000,
                durationMs: player.duration * 1000,
                videoId: theVideo.videoId,
            }

            addLogstandard(data)
            .then(res => {
                if(res.code == 200){

                }

                else ElMessage.error(res.msg)
            })

        }
    })
}

function updateVideoInfo(videoIndex) {
    let videoList = baseDomain.videoList

    theVideo.videoId = videoList[videoIndex].videoId

    theVideo.likeCount = videoList[videoIndex].like
    theVideo.likeCount = !theVideo.likeCount ? 0 : theVideo.likeCount

    theVideo.commentCount = videoList[videoIndex].commentCount
    theVideo.commentCount = !theVideo.commentCount ? 0 : theVideo.commentCount

    theVideo.collectionCount = videoList[videoIndex].collection
    theVideo.collectionCount = !theVideo.collectionCount ? 0 : theVideo.collectionCount

    theVideo.authorId = videoList[videoIndex].authorId

    theVideo.liked = videoList[videoIndex].liked
    theVideo.liked = !theVideo.liked ? false : theVideo.liked

    theVideo.collected = videoList[videoIndex].collected
    theVideo.collected = !theVideo.collected ? false : theVideo.collected

    commentContent.value = ''
    baseDomain.parentId = null
    commentPlaceHolder.value = '请输入评论'

}




</script>

<style scoped>
.vp {
    display: flex;
    height: 100%;
    width: 100%;
}

.siderbar {
    position: relative;

    flex: .45;
    width: 30%;
    display: none;

    /* padding: 20px; */
    background-color: rgb(39, 38, 38);

    border-radius: 8px;

    /* overflow-y: scroll; */
}

.siderbar .content {
    height: 100%;
}

.siderbar .close-box {
    text-align: right;

    /* padding: 20px; */
}

.siderbar .close-box .close-icon {
    cursor: pointer;
}

.siderbarActive {
    display: block;
}

.siderbar .author-video-list-box {
    display: flex;
    flex-wrap: wrap;

    padding: 10px 0;
    /* justify-content: space-between; */
}

.siderbar .content .author-video {
    width: 45%;
    height: 250px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;

    overflow: hidden;

    cursor: pointer;

    border: 1px solid gray;
    border-radius: 8px;
}

.siderbar .close-box,
.siderbar .content {
    padding: 10px;
}

.author-video img {
    position: relative;
    /* top: 50%;     */
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, 0%);
}

.video-player {
    flex: 1;

    border-radius: 8px;
}

.siderbar-comment-box {
    position: relative;
    height: 100%;
}

.siderbar-comment-box .comment-item {
    display: flex;
}

.siderbar-comment-box .avatar-box {}

.comment-item .ci-right {
    padding: 0 10px;
}

.comment-item .ci-right .comment-bottom-info {
    font-size: 12px;
    color: gray;
}

.comment-item .ci-right>div {
    margin-bottom: 5px;
}

.siderbar-comment-box .avatar-box img {
    width: 50px;
    height: 50px;

    border-radius: 50%;
    border: 2px solid gray;
}

.comment-item .ci-right .comment-bottom-info {
    display: flex;

    align-items: center;
}

.ci-right .comment-bottom-info>div {
    margin-right: 15px;
}

.ci-right .replay-list .replay-item {
    display: flex;
}

.replay-item .ri-left img {
    width: 30px;
    height: 30px;

    border-radius: 50%;
    border: 2px solid gray;
}

.replay-item .ri-right {
    padding: 0 10px;
}

.replay-item .ri-right>div {
    padding: 2px 0;
}

.replay-item .ri-right .bottom-info {
    display: flex;
    align-items: center;
}

.ri-right .bottom-info>div {
    color: gray;
    font-size: 12px;
    margin-right: 5px;
}

.siderbar-avatar-box {
    height: 100%;
}

.comment-operation-box {
    position: absolute;
    width: 100%;
    bottom: 0px;
    text-align: center;

    background-color: rgb(39, 38, 38);
}

/* .comment-operation-box .send-comment-button {
    width: 20%;
} */

.operation-box {
    position: absolute;
    top: 15%;
    right: 2.5%;
    z-index: 999;
}

.operation-box>div {
    margin-bottom: 20px;

    cursor: pointer;

    text-align: center;
}

.operation-box img {
    height: 35px;
    width: 35px;
}

.avatar-box .image-box {
    border: 2px solid rgb(139, 33, 33);
    border-radius: 50%;
}

.avatar-box .image-box img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.avatar-box .follow-button {
    position: relative;
    top: -10px;
}

#follow-icon {
    width: 20px;
    height: 20px;
}
</style>